<!DOCTYPE html>
<html>

<head>
  <title>分析结果</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <style>
    .pagination-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px 0;
    }

    .page-info {
      margin: 0 15px;
      color: #666;
    }

    .table-container {
      margin: 20px 0;
    }
  </style>
</head>

<body class="p-5">
  <div class="container">
    <h1>分析结果</h1>

    <!-- 文件信息卡片 -->
    <div class="card mb-4">
      <div class="card-header">
        <h5 class="mb-0">文件信息</h5>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-4">
            <strong>文件名：</strong>
            <span class="text-muted">{{ original_filename }}</span>
          </div>
          <div class="col-md-4">
            <strong>文件格式：</strong>
            <span class="badge bg-primary">{{ file_extension }}</span>
          </div>
          <div class="col-md-4">
            <strong>上传时间：</strong>
            <span class="text-muted">{{ upload_time }}</span>
          </div>
        </div>
      </div>
    </div>

    <h3>图表</h3>
    <img src="{{ image_url }}" class="img-fluid" alt="分析图">

    <h3 class="mt-4">完整数据表格</h3>
    <div class="page-info">
      共 {{ total_rows }} 条数据，每页显示 {{ rows_per_page }} 条
    </div>

    <div class="table-container" id="tableContainer">
      {{ table | safe }}
    </div>

    <!-- 分页控件 -->
    <div class="pagination-container" id="paginationContainer" style="display: none;">
      <nav aria-label="数据分页">
        <ul class="pagination" id="pagination">
          <!-- 分页按钮将通过 JavaScript 动态生成 -->
        </ul>
      </nav>
    </div>

    <a class="btn btn-secondary mt-4" href="/">返回上传页面</a>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    let currentPage = {{ current_page }};
    let totalPages = {{ total_pages }};
    let totalRows = {{ total_rows }};

    // 生成分页按钮
    function generatePagination() {
      const pagination = document.getElementById('pagination');
      pagination.innerHTML = '';

      // 上一页按钮
      const prevLi = document.createElement('li');
      prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
      prevLi.innerHTML = `<a class="page-link" href="#" onclick="changePage(${currentPage - 1})">上一页</a>`;
      pagination.appendChild(prevLi);

      // 页码按钮
      const startPage = Math.max(1, currentPage - 2);
      const endPage = Math.min(totalPages, currentPage + 2);

      for (let i = startPage; i <= endPage; i++) {
        const li = document.createElement('li');
        li.className = `page-item ${i === currentPage ? 'active' : ''}`;
        li.innerHTML = `<a class="page-link" href="#" onclick="changePage(${i})">${i}</a>`;
        pagination.appendChild(li);
      }

      // 下一页按钮
      const nextLi = document.createElement('li');
      nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
      nextLi.innerHTML = `<a class="page-link" href="#" onclick="changePage(${currentPage + 1})">下一页</a>`;
      pagination.appendChild(nextLi);
    }

    // 切换页面
    function changePage(page) {
      if (page < 1 || page > totalPages || page === currentPage) {
        return;
      }

      // 显示加载状态
      const tableContainer = document.getElementById('tableContainer');
      tableContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">加载中...</span></div></div>';

      // 发送 AJAX 请求获取新页面数据
      fetch(`/get_page_data?page=${page}`)
        .then(response => response.json())
        .then(data => {
          if (data.error) {
            tableContainer.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
            return;
          }

          // 更新表格内容
          tableContainer.innerHTML = data.table_html;

          // 更新分页信息
          currentPage = data.current_page;
          totalPages = data.total_pages;
          totalRows = data.total_rows;

                     // 更新分页控件显示状态
           if (totalPages > 1) {
             document.getElementById('paginationContainer').style.display = 'flex';
             generatePagination();
           } else {
             document.getElementById('paginationContainer').style.display = 'none';
           }
           
           // 更新页面信息
           document.querySelector('.page-info').textContent = `共 ${totalRows} 条数据，每页显示 20 条`;
        })
        .catch(error => {
          tableContainer.innerHTML = `<div class="alert alert-danger">加载数据失败: ${error}</div>`;
        });
    }

    // 页面加载完成后生成分页控件
    document.addEventListener('DOMContentLoaded', function () {
      // 只有当总页数大于1时才显示分页控件
      if (totalPages > 1) {
        document.getElementById('paginationContainer').style.display = 'flex';
        generatePagination();
      }
    });
  </script>
</body>

</html>